<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>服务管理</el-breadcrumb-item>
      <el-breadcrumb-item>服务列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <p style="text-align: center; margin: 50px 0 20px">关联文章</p>
      <div style="text-align: center">
        <el-transfer style="text-align: left; display: inline-block" v-model="value4" filterable :left-default-checked="[2, 3]"
          :right-default-checked="[]" :titles="['Source', 'Target']" :button-texts="['到左边', '到右边']" :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
          @change="handleChange" :data="data">
          <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
        </el-transfer>
      </div>
    </el-card>

  </div>
</template>

<style>
</style>

<script>
  export default {
    data() {
      const generateData = _ => {
        const data = []
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${i}`,
            disabled: i % 4 === 0
          })
        }
        return data
      }
      return {
        data: generateData(),
        value4: [1]
      }
    },
    methods: {
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys)
      }
    }
  }
</script>
